<template>
  <div>
    <div class="nav">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/userinfo/alluser' }">所有用户信息</el-breadcrumb-item>
        <el-breadcrumb-item>{{ details.username }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-form :model="details" ref="details" label-width="100px" class="demo-ruleForm">
      <el-row>
        <el-col :span="4">
          <el-form-item label="用户姓名" prop="username">
            <el-input v-model="details.username" :label-width="formLabelWidth"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系电话" prop="call">
            <el-input v-model="details.call" label-width="140px"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="身份证号" prop="sfz">
            <el-input v-model="details.sfz" label-width="140px" maxlength="18" @blur="sex"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="性别" prop="sex">
            <el-input v-model="details.sex" label-width="140px" :disabled="true"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item label="生日" prop="birthday">
            <el-input v-model="details.birthday" label-width="140px" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="详细地址" prop="address">
        <el-input v-model="details.address" :label-width="formLabelWidth"></el-input>
      </el-form-item>
      <el-col>
        <el-col :span="5">
          <el-form-item label="是否购车">
            <el-switch v-model="details.buy" @change="changeStatus" style="marign-right: 120px"></el-switch>
          </el-form-item>
        </el-col>

        <el-col :span="5">
          <el-form-item label="是否为新车" prop="newMoto">
            <el-switch v-model="details.newMoto"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-button @click="message_dialog = true" :type="message_type" :disabled="message_dis" :loading="m_loading">{{
              message_text
          }}</el-button>&nbsp;&nbsp;&nbsp;&nbsp;短信余额:
          {{ message_count }}
        </el-col>
      </el-col>
      <el-dialog :title="message_title" :visible.sync="message_dialog">
        <!-- <el-form :model="form">
          <el-form-item label="短信内容：" :label-width="formLabelWidth">
            <el-input type="textarea" v-model="message_desc"></el-input>
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form> -->
        <el-input type="textarea" :rows="3" placeholder="短信内容" v-model="message_desc" :style="'font-size:45px'">
        </el-input>
        <div slot="footer" class="dialog-footer">
          <el-button @click="message_dialog = false">取 消</el-button>
          <el-button type="primary" @click="message_check()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 默认false if yes to true -->
      <el-col>
        <div :style="{ display: show }">
          <el-form-item label="购车时间">
            <el-col :span="6">
              <el-date-picker type="date" placeholder="购车时间" v-model="details.date1" style="width: 100%">
              </el-date-picker>
            </el-col>
          </el-form-item>
          <el-col :span="6">
            <el-form-item label="车辆品牌" prop="Moto">
              <el-input v-model="details.Moto" :label-width="formLabelWidth"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="车辆型号" prop="MotoType">
              <el-input v-model="details.MotoType" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="车牌号" prop="brand">
              <el-input v-model="details.brand" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :style="{ display: show_jg ? '' : 'none' }">
            <el-form-item label="购车价格" prop="Money">
              <el-input v-model="details.Money" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :style="{ display: show_jg ? 'none' : '' }">
            <el-button round @click="jg">info</el-button>
          </el-col>
        </div>
      </el-col>
      <!-- 买保险 -->
      <el-col :span="24">
        <el-col :span="8">
          <el-form-item label="购保时间">
            <div class="block">
              <el-date-picker type="date" v-model="details.date" style="width: 90%" placeholder="选择日期">
              </el-date-picker>
            </div>
          </el-form-item>
        </el-col>
        <!-- 审车 -->
        <el-col :span="8">
          <el-form-item label="首次审车时间">
            <div class="block">
              <el-date-picker v-model="details.date_sc" type="date" style="width: 90%" placeholder="选择日期">
              </el-date-picker>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-col :span="4">
            <el-form-item label="本年购保情况" prop="bx_true">
              <el-switch style="display: block" v-model="details.bx_true" active-color="#13ce66"
                inactive-color="#ff4949" active-text="已购" inactive-text="未购">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="本年审车情况" prop="sc_true">
              <el-switch style="display: block" v-model="details.sc_true" active-color="#13ce66"
                inactive-color="#ff4949" active-text="已审" inactive-text="未审">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-col>
      </el-col>
      <el-col :span="6">
        <el-form-item label="行驶证图片：" prop="img">
          <div class="block">
            <el-col :span="24">
              <div id="ddd">
                <el-image :src="details.img" style="width: 80%">
                  <div slot="error" class="image-slot">暂无图片！</div>
                </el-image>
              </div>
            </el-col>
            <el-button type="info" round size="small" @click="ed(0)">新增/修改</el-button>
            <el-button type="primary" round size="small" @click="bigimg(0)" :style="{
              display:
                this.details.img && this.details.img != this.cookie
                  ? ''
                  : 'none',
            }">查看大图</el-button>
          </div>
        </el-form-item>
        <el-form-item label="" prop="img_xszfm">
          <div class="block">
            <el-col :span="24">
              <el-image :src="details.img_xszfm" style="width: 80%">
                <div slot="error" class="image-slot">暂无图片！</div>
              </el-image>
            </el-col>
            <el-button type="info" round size="small" @click="ed(1)">新增/修改</el-button>
            <el-button type="primary" round size="small" @click="bigimg(1)" :style="{
              display:
                this.details.img_xszfm &&
                  this.details.img_xszfm != this.cookie
                  ? ''
                  : 'none',
            }">查看大图</el-button>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="车辆合格证：" prop="img_qs">
          <div class="block">
            <el-col :span="24">
              <el-image :src="details.img_qs" style="width: 80%">
                <div slot="error" class="image-slot">暂无图片！</div>
              </el-image>
            </el-col>
            <el-button type="info" round size="small" @click="ed(2)">新增/修改</el-button>
            <el-button type="primary" round size="small" @click="bigimg(2)" :style="{
              display:
                this.details.img_qs && this.details.img_qs != this.cookie
                  ? ''
                  : 'none',
            }">查看大图</el-button>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="新车合照：" prop="img_new">
          <div class="block">
            <el-col :span="24">
              <el-image :src="details.img_new" style="width: 80%">
                <div slot="error" class="image-slot">暂无图片！</div>
              </el-image>
            </el-col>
            <el-button type="info" round size="small" @click="ed(3)">新增/修改</el-button>
            <el-button type="primary" round size="small" @click="bigimg(3)" :style="{
              display:
                this.details.img_new && this.details.img_new != this.cookie
                  ? ''
                  : 'none',
            }">查看大图</el-button>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="驾驶证：" prop="img_jsz">
          <div class="block">
            <el-col :span="24">
              <el-image :src="details.img_jsz" style="width: 80%">
                <div slot="error" class="image-slot">暂无图片！</div>
              </el-image>
            </el-col>
            <el-button type="info" round size="small" @click="ed(4)">新增/修改</el-button>
            <el-button type="primary" round size="small" @click="bigimg(4)" :style="{
              display:
                this.details.img_jsz && this.details.img_jsz != this.cookie
                  ? ''
                  : 'none',
            }">查看大图</el-button>
          </div>
        </el-form-item>
      </el-col>
      <!-- 修改照片 -->

      <el-dialog title="修改图片" :visible.sync="dialogeditimg">
        <el-col>
          <el-col :span="6" :style="{ display: this.Mimg == '' ? 'none' : '' }">
            <el-image :src="this.Mimg" style="width: 144px; height: 146px">
            </el-image>
            <el-button type="primary" round size="small" @click="openBig()">查看大图</el-button>
          </el-col>
          <el-col :span="6">
            <el-upload hight="100%" action="" ref="upload" v-model="details.img" list-type="picture-card"
              :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-change="imgChange"
              :auto-upload="false">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-col>
        </el-col>
        <el-dialog :visible.sync="dialogVisible" size="tiny">
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
        <el-dialog :visible.sync="dialogVisible" size="tiny">
          <img width="100%" :src="img" alt />
        </el-dialog>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogeditimg = false">取 消</el-button>
          <el-button type="primary" @click="editimg()">确 定</el-button>
        </span>
      </el-dialog>
      <el-col :span="24">
        <el-form-item label="备注" prop="desc">
          <el-input type="textarea" v-model="details.desc"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item>
          <el-button type="primary" @click="update('details')">更新</el-button>
          <el-button @click="goback()">返回</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import unit from "../../../unit/unit.js";
export default {
  data() {
    return {
      formLabelWidth: "120px",
      details: {},
      show: "none",
      TmpDate: "", //保险
      TmpDate1: "", //购车
      TmpDate2: "", //审车
      dialogeditimg: false,
      dialogVisible: false,
      dialogImageUrl: "",
      edit: null,
      show_jg: false,
      key_: "",
      fileList: [],
      img: "",
      cookie: "",
      Mimg: "",
      NowImgName: "",
      oldimg: "",
      E: "",
      message_dialog: false,
      message_desc: "",
      message_title: "",
      message_type: "",
      message_text: "发送短信",
      message_count: 0,
      message_dis: false,
      m_loading: false
      // LoginInfo: JSON.parse(localStorage.isLogin).UAdminPhone,
    };
  },

  created() {
    // console.log(this.$route.query.id);
    // 请求短信余额
    let m_id = JSON.parse(localStorage.isLogin)._id;
    this.$axios({
      method: "POST",
      url: "/api/getMessageCount",
      data: {
        _id: m_id,
      },
    }).then((req, res) => {
      this.message_count = req.data.data
      if (req.data.data <= 0) {
        this.message_type = "info"
        this.message_dis = true
      } else {
        this.message_type = "primary"
      }


    })
    let _id = this.$route.query.id;
    this.$axios({
      method: "POST",
      url: "/api/getOneUser",
      data: {
        _id,
        LoginInfo: JSON.parse(localStorage.isLogin).UAdminPhone,
      },
    }).then((res) => {
      this.details = unit.getAll(res);
      this.E = JSON.parse(localStorage.isLogin).EStoreName
      this.cookie = unit.getCookie("url") + this.E;
      // console.log(this.cookie)
      // test delect

      this.details = unit.reimg(this.details, this.E);
      // console.log(this.details)
      this.details.newMoto == undefined ||
        this.details.newMoto == "false" ||
        this.details.newMoto == false
        ? (this.details.newMoto = false)
        : (this.details.newMoto = true);
      this.details.buy == true ? (this.show = "") : (this.show = "none");
      // 修改短信内容
      let UAdmin = JSON.parse(localStorage.isLogin).UAdminPhone;
      // console.log(this.details)
      this.message_title = "短信发送至：" + this.details.call
      this.message_desc =
        "尊敬的vip客户：" +
        this.details.username +
        "，您好！您的摩托车保险将于" +
        (this.details.date == "" ? "近期" : this.details.date) +
        "到期。详询：" +
        UAdmin +
        "。";
    });

  },

  methods: {
    bigimg(n) {
      switch (n) {
        case 0:
          window.open(this.details.img);
          break;
        case 1:
          window.open(this.details.img_xszfm);
          break;
        case 2:
          window.open(this.details.img_qs);
          break;
        case 3:
          window.open(this.details.img_new);
          break;
        case 4:
          window.open(this.details.img_jsz);
          break;
      }
    },
    // 判断男女及生日
    sex() {
      if (this.details.sfz.length == 18) {
        let temp = this.details.sfz;
        this.details.sex = temp.charAt(16) % 2 == 0 ? "女" : "男";
        // 处理生日
        this.details.birthday =
          temp.substring(6, 10) +
          "-" +
          temp.substring(10, 12) +
          "-" +
          temp.substring(12, 14);
        // console.log(this.details.birthday)
      }
    },
    // 是否购车
    changeStatus(callback) {
      this.details.buy = callback;
      callback == true ? (this.show = "") : (this.show = "none");
    },
    // 更新
    update() {
      this.details.LoginInfo = JSON.parse(localStorage.isLogin).UAdminPhone;
      if (
        this.TmpDate != this.details.date &&
        this.details.date != "" &&
        this.details.date != null
      ) {
        if (this.details.date.length <= 10) {
          console.log();
        } else {
          this.details.date = this.details.date.toLocaleDateString();
        }
        this.details.code = this.details.date.slice(5, 7).replace("/", "");
      } else {
        this.details.date = this.TmpDate;
        this.details.code = this.TmpDate.slice(5, 7).replace("/", "");
      }

      if (
        this.TmpDate2 != this.details.date_sc &&
        this.details.date_sc != "" &&
        this.details.date_sc != null
      ) {
        if (this.details.date_sc.length <= 10) {
          console.log();
        } else {
          this.details.date_sc = this.details.date_sc.toLocaleDateString();
        }
        this.details.code_sc = this.details.date_sc
          .slice(5, 7)
          .replace("/", "");
      } else {
        this.details.date_sc = this.TmpDate2;
        this.details.code_sc = this.TmpDate2.slice(5, 7).replace("/", "");
      }

      // }
      if (
        this.TmpDate1 != this.details.date1 &&
        this.details.date1 != "" &&
        this.details.date1 != null
      ) {
        if (this.details.date1.length <= 10) {
          console.log();
        } else {
          this.details.date1 = this.details.date1.toLocaleDateString();
        }
      } else {
        this.details.date1 = this.TmpDate1;
      }
      this.$axios({
        method: "POST",
        url: "/api/update",
        data: this.details,
      }).then((res) => {
        // console.log(res);
        if (res.data.status === 1) {
          this.$message({
            message: "修改成功!",
            type: "success",
          });

          let _id = this.$route.query.id;
          this.$axios({
            method: "POST",
            url: "/api/getOneUser",
            data: {
              _id,
              LoginInfo: JSON.parse(localStorage.isLogin).UAdminPhone,
            },
          }).then((res) => {
            this.details = unit.getAll(res);
            // test delect
            this.details = unit.reimg(this.details, this.E);
          });
        }
      });
    },
    goback() {
      history.back();
    },
    message_check() {
      let sign_id = JSON.parse(localStorage.isLogin).sign_id;
      let _id = JSON.parse(localStorage.isLogin)._id;
      let mobile = this.details.call;
      // console.log(mobile)
      // console.log("发送短信")

      this.$axios({
        method: "POST",
        url: "/api/getMessageCount",
        data: {
          _id,
        },
      }).then((req, res) => {
        switch (req.data.status) {
          case 1:
            if (Number(req.data.data) > 0) {
              this.message_dialog = false
              this.message_text = "发送中..."
              this.m_loading = true
              setTimeout(() => {
                this.$axios({
                  method: "POST",
                  url: "/api/sendMessage", data: {
                    _id,
                    sign_id,
                    mobile,
                    content: this.message_desc,
                  },
                }).then((req_, res) => {
                  switch (req_.data.status) {
                    case 1:
                      this.message_type = "success"
                      this.message_dis = true
                      this.message_text = "发送成功！"
                      this.m_loading = false
                      this.$axios({
                        method: "POST",
                        url: "/api/getMessageCount",
                        data: {
                          _id,
                        },
                      }).then((req__, res) => {
                        this.message_count = req__.data.data
                      })
                      break;
                    case -9:
                      this.message_type = "warning"
                      this.message_dis = true
                      this.message_text = "发送失败！余额不足！"
                      this.m_loading = false
                      break;
                    default:
                      this.message_type = "danger"
                      this.message_dis = true
                      this.message_text = "发送失败！"
                      this.m_loading = false
                  }
                })
              }, 2000)
            } else {
              this.message_dialog = false
              this.message_type = "warning"
              this.message_dis = true
              this.message_text = "发送失败！余额不足！"
              this.m_loading = false
            }
            break
        }
      })
    },
    // 点击新增修改
    ed(n) {
      this.Mimg = "";
      switch (n) {
        case 0:
          this.key_ = 0;
          this.NowImgName = "行驶证";
          this.dialogeditimg = true;
          break;
        case 1:
          this.key_ = 1;
          this.NowImgName = "行驶证2";
          this.dialogeditimg = true;
          break;
        case 2:
          this.key_ = 2;
          this.NowImgName = "合格证";
          this.dialogeditimg = true;
          break;
        case 3:
          this.key_ = 3;
          this.NowImgName = "新车合照";
          this.dialogeditimg = true;
          break;
        case 4:
          this.key_ = 4;
          this.NowImgName = "驾驶证";
          this.dialogeditimg = true;
          break;
      }
    },
    // 显示价格
    jg() {
      this.show_jg = true;
    },
    handleRemove(file, fileList) { },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    imgChange(file, fileList) {
      this.edit = file.raw;
    },
    // 修改行驶证
    editimg(i, row) {
      if (this.Mimg == "" || this.Mimg == "upload/") {
        if (this.edit == null) {
          this.$message({
            message: "未选择图片!",
            type: "info",
          });
          return 0;
        }
      }
      switch (this.NowImgName) {
        case "行驶证":
          this.oldimg = this.details.img;
          this.details.img = this.Mimg;
          this.dialogeditimg = false;
          break;
        case "行驶证2":
          this.oldimg = this.details.img_xszfm;
          this.details.img_xszfm = this.Mimg;
          this.dialogeditimg = false;
          break;
        case "合格证":
          this.oldimg = this.details.img_qs;
          this.details.img_qs = this.Mimg;
          this.dialogeditimg = false;
          break;
        case "新车合照":
          this.oldimg = this.details.img_new;
          this.details.img_new = this.Mimg;
          this.dialogeditimg = false;
          break;
        case "驾驶证":
          this.oldimg = this.details.img_jsz;
          this.details.img_jsz = this.Mimg;
          this.dialogeditimg = false;
          break;
      }
      let formData = new FormData();
      let oldimg = "";
      let imgName = "";
      // 带关键词
      switch (this.key_) {
        case 0:
          imgName = "img";
          break;
        case 1:
          imgName = "img_xszfm";
          break;
        case 2:
          imgName = "img_qs";
          break;
        case 3:
          imgName = "img_new";
          break;
        case 4:
          imgName = "img_jsz";
          break;
      }
      this.edit == null
        ? (this.edit =
          "upload/" + this.Mimg.substring(this.Mimg.lastIndexOf("/") + 1))
        : this.edit;
      // 上传后清除数据库  防止删图片
      formData.append(imgName, this.edit); 
      
      this.oldimg == ""
        ? (oldimg = this.details[imgName])
        : (oldimg = this.oldimg);
      formData.append("oldimg", oldimg);
      formData.append("imgName", imgName);
      formData.append("_id", this.details._id);
      formData.append("E", JSON.parse(localStorage.isLogin).EStoreName);
      formData.append("LoginInfo", JSON.parse(localStorage.isLogin).UAdminPhone);
      this.$axios({
        method: "POST",
        url: "/api/editimg",
        data: formData,
      }).then((res) => {
        if (res.data.status === 1) {
          this.dialogeditimg = false;
          this.$refs.upload.clearFiles();
          this.edit = null;
          this.$message({
            message: "修改成功!",
            type: "success",
          });

          let _id = this.$route.query.id;
          this.$axios({
            method: "POST",
            url: "/api/getOneUser",
            data: {
              _id,
              LoginInfo: JSON.parse(localStorage.isLogin).UAdminPhone,
            },
          }).then((res) => {
            this.details = unit.getAll(res);
            // test delect
            // console.log(this.E)
            this.details = unit.reimg(this.details, this.E);
          });
        }
      });
    },
  },
  components: {},
};
</script>

<style>
.nav {
  height: 30px;
  padding-top: 15px;
  font-size: 20px;
}

/* .el-input {
  width: 120px;
} */
.el-form-item__content {
  text-align: left;
}

.el-main[data-v-a83bd3b0] {
  text-align: left !important;
  height: 820px !important;
}

.image-slot {
  text-align: center;
  color: red;
  background: #f5f7fa;
}

.el-image__error,
.el-image__inner,
.el-image__placeholder {
  height: 200px;
  width: 200px;
}
</style>
